<template>
  <div style="height: 100%; background: #fff">
    <a-spin :spinning="loading" size="large" tip="Loading...">
      <!--查询区域-->
      <div class="jeecg-basic-table-form-container">
        <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol"
          :wrapper-col="wrapperCol">
          <a-row :gutter="24">
            <a-col :lg="6">
              <a-form-item label="年度" name="year">
                <j-input placeholder="" v-model:value="queryParam.year"></j-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-col :lg="6">
                  <a-button type="primary" preIcon="ant-design:search-outlined" @click="reload">查询</a-button>
                  <a-button preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
                  <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px">
                    {{ toggleSearchStatus ? '收起' : '展开' }}
                    <Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
                  </a>
                </a-col>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!--引用表格-->
      <BasicTable @register="registerTable">
        <!--插槽:table标题-->
        <template #tableTitle>
        </template>
        <!--操作栏-->
        <template #action="{ record }">
          <TableAction :actions="getTableAction(record)" />
        </template>
      </BasicTable>

      <!-- 实验记录 -->
      <LabItemsRecordsModal ref="registerItemRecordsModal" @success="handleSuccess"></LabItemsRecordsModal>
    </a-spin>
  </div>
  
</template>

<script lang="ts" name="scientific-labWscientific" setup>
import { ref, reactive } from 'vue';
import { BasicTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { columns } from './LabWscientificBook.data';
import { list } from './LabWscientificBook.api';
import LabItemsRecordsModal from './components/LabItemsRecordsModal.vue';
import { JInput } from '/@/components/Form';
import axios from 'axios';
import { useGlobSetting } from '/@/hooks/setting';

const formRef = ref();
const queryParam = reactive<any>({});
const toggleSearchStatus = ref<boolean>(false);
const registerItemRecordsModal = ref();
let loading = ref(false);
const globSetting = useGlobSetting();
const baseApiUrl = globSetting.domainUrl;
//注册table数据
const { tableContext } = useListPage({
  tableProps: {
    title: '原始记录本',
    api: list,
    columns,
    canResize: false,
    useSearchForm: false,
    showIndexColumn: true,
    actionColumn: {
      width: 150,
      fixed: 'right',
    },
    beforeFetch: (params) => {
      return Object.assign(params, queryParam);
    },
  },
});
const [registerTable, { reload }, { selectedRowKeys }] = tableContext;
const labelCol = reactive({
  xs: { span: 24 },
  sm: { span: 7 },
});
const wrapperCol = reactive({
  xs: { span: 24 },
  sm: { span: 16 },
});



/**
 * 成功回调
 */
function handleSuccess() {
  (selectedRowKeys.value = []) && reload();
}

/**
 * 实验记录
 */
function handleItemRecords(record) {
  registerItemRecordsModal.value.openModel(record);
}
const instancea = axios.create({
  baseURL: baseApiUrl,
  headers: {
    responseType: 'blob',
    ContentType: 'multipart/json, charset=UTF-8',
    timeout: 1000000,
    type: 'multipart/form-data',
  },
});
function handleBatchDownload(record){
  console.log('record',record),
  loading.value = true;
  instancea.defaults.responseType = 'blob';
  instancea
    .post(`/entrust/labWscientific/downloadShiYanAsZip/${record.kyId}`)
    .then((response:any) => {
      // 处理返回的数据
      loading.value = false;
      console.log('response',response);
      const fileName = record.kyName + '.zip';
      const elink = document.createElement('a');
      elink.download = fileName;
      elink.style.display = 'none';
      let binaryData = [];
      binaryData.push(response.data);
      elink.href = window.URL.createObjectURL(new Blob(binaryData));
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink);
    })
    .catch((error) => {
      // 处理错误
      console.error(error);
      loading.value = false;
    });
}
/**
 * 操作栏
 */
function getTableAction(record) {
  return [
    {
      label: '实验记录',
      onClick: handleItemRecords.bind(null, record),
    },
    {
      label: '批量下载',
      onClick: handleBatchDownload.bind(null, record),
    }
  ];
}


/**
 * 查询
 */
function searchQuery() {
  reload();
}

/**
 * 重置
 */
function searchReset() {
  formRef.value.resetFields();
  selectedRowKeys.value = [];
  //刷新数据
  reload();
}
</script>

<style lang="less" scoped>
.jeecg-basic-table {
  min-height: auto;
}

.jeecg-basic-table-form-container {
  .table-page-search-submitButtons {
    display: block;
    margin-bottom: 24px;
    white-space: nowrap;
  }

  .query-group-cust {
    width: calc(50% - 15px);
    min-width: 100px !important;
  }

  .query-group-split-cust {
    width: 30px;
    display: inline-block;
    text-align: center;
  }
}
:deep(.ant-table-title) {
    display: none;
  }
</style>
